<template>
<!-- 人员 -->
    <div class="batchStaff">
        <el-row>
            <el-col :span="8" class='input_batch'>
                <div class="input-wrap clearfix">
                    <div class="g-cont">
                        <el-input placeholder="选择组" v-model="deptName" @focus.stop="focusFun"></el-input>
                        <i class="fa fa-times" @click="clearGroupId"></i>
                    </div>
                    <div class="g-cont">
                        <el-input placeholder="输入员工姓名" v-model="userName" @blur.stop="staffBlur"></el-input>
                    </div>
                </div>
                <div class="busi-group">
                    <el-tree 
                        v-show='isshowStaff'
                        :data="deptTree" 
                        :props="defaultProps" 
                        @node-click="treeClick"
                        :highlight-current="true"
                        :filter-node-method="filterNode"
                        ref="tree2">
                    </el-tree>
                    <ul class="staffSg-list" v-show="isshowlist">
                        <li v-for="(item,index) in stafflist" @click="personClick(item)" :key="'a'+index" class='staffSg-list-li'>{{item.label}}</li>
                    </ul>
                </div>
            </el-col>
            <el-col :span="16">
                <div class="pub-table gray-table">
                    <el-table :data="EmptreeData" style="width: 100%" height="260">
                        <el-table-column prop="label" label="姓名" align="left"></el-table-column>
                        <el-table-column prop="employeeNo" label="工号"></el-table-column>
                        <el-table-column  label="操作" width="80" fixed="right">
                            <template slot-scope="scope">
                                <el-button @click="Removecolume(scope.row)"  type="text" size="small">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>     
            </el-col>
        </el-row>
    </div>
</template>
<script>
import { initDeptTree, getUserBaseList } from "@/service/core/deptConf";
import { getCurrUserInfo } from '@/service/login';     //当前登陆人信息
import { isArray, transformTozTreeFormat } from "@/utils/Tools";
export default {
    props: {
        treeData: {
            type: Array,
            default() {
                return []
            }
        }
    },
    data() {
        return {
            token: this.$store.state.token.token,
            deptId: this.$store.state.token.deptId,
            deptName: this.$store.state.token.deptName,
            deptTree: [],
            defaultProps: {
                children: "children",
                label: "name",
                isLeaf: 'leaf'
            },
            treeNode: {},
            deptName: '',   //业务组
            isshowStaff: false,
            isshowlist: true,
            userName: '',  //员工
            stafflist: [],  //所有人员
            EmptreeData: [], // 表格绑定的数据
        };
    },
    watch: {
        treeData(val) {
            if(val.length > 0) {
                val.map(item => {
                    if(this.EmptreeData.findIndex(v => v.id == item.id) == -1) {
                        this.EmptreeData.push(item);
                    }
                })
                console.log('emp',this.EmptreeData)
            }
        },
        EmptreeData(val){   
            console.log(val)   
            this.$emit('empowersEmp', val);
        },
        deptName(val) {//模糊搜索业务组
            this.$refs.tree2.filter(val);
        },
    },
    mounted() {
        this.$nextTick(() => { 
            this.initgetCurrUserInfo();
            $(document).click((e) => {
                if (e.target.className != "el-input__inner") {
                    this.isshowStaff = false;
                }
            });
            $('body').on('click','.batchStaff',(e)=> {  // 阻止冒泡
                event.stopPropagation();   
            })
        })
    },
    beforeDestroy() {
        this.$emit('empowersEmp', []);
    },
    methods: {
        filterNode(value, data) { // 节点过滤
            if (!value) return true;
            return data.name.indexOf(value) !== -1; 
        },
        initgetCurrUserInfo(){// 当前用户信息查询
            getCurrUserInfo({ token: this.token }).then( res => { 
                if( res.data.code == 1000){ 
                    let data = res.data.data;
                    this.deptId = data.USER.deptId;
                    this.deptName = data.USER.deptName;
                    this.initgetStaffById(data.USER.deptId);
                }
            })
        },
        initgetStaffById(deptId, name){// 查询机构下的人(根据部门id, 或部门id加姓名)
            let params = {
                deptId: deptId,
                usernameLk: name,
                status:'ACTIVE',
                columns: 'employeeNo', 
                orders: 'ASC',
            }
            getUserBaseList(params).then( res => { 
                this.stafflist.splice(0, this.stafflist.length);
                if( res.data.code == 1000){ 
                    let result = res.data.data;
                    if(isArray(result) && result.length > 0){ 
                        result.map((item,index) => { 
                            this.stafflist.push({
                                type        : "person",
                                id          : item.id,
                                userId      : item.id,
                                label       : item.username + '(' + item.employeeNo + ')',
                                username    : item.username,
                                deptId      : item.deptId,
                                deptName    : item.deptName,
                                employeeNo  : item.employeeNo,
                                positionId  : item.positionId,
                                positionName: item.positionName,
                            });
                        })
                    }
                    this.isshowStaff = false;
                    this.isshowlist = true;
                }
            })
        },
        personClick(treeNode){ // 人员点击
            console.log(treeNode)
            let index = this.EmptreeData.findIndex(v => v.id == treeNode.id);
            if (index == -1) {
                this.EmptreeData.push({                  //员工
                    type: "person",
                    id: treeNode.id,
                    userId: treeNode.id,
                    label: treeNode.username,
                    username: treeNode.username,
                    deptId: treeNode.deptId,
                    deptName: treeNode.deptName,
                    employeeNo: treeNode.employeeNo,
                    positionId: treeNode.positionId,
                    positionName: treeNode.positionName
                });
            }
        },
        focusFun() {//焦点获取业务组
            this.deptId = null;
            this.deptName  = null;
            this.userName = null;
            this.isshowlist  = false;
            this.isshowStaff = true;
            this.deptTreeInit();
        },
        staffBlur(){
            if(this.userName){ 
                this.initgetStaffById(this.deptId, this.userName);
            }
        },
        clearGroupId() { // 删除业务组
            this.deptId = null;
            this.deptName = null;
            if(this.userName) {
                this.initgetStaffById('', this.userName);
            }
        },
        deptTreeInit() { // 树信息
            this.deptTree = [];
            let params = { token: this.token, statusId: "ACTIVE" };
            initDeptTree(params).then(response => {
                if (response.data.code == 1000 && isArray(response.data.data)) {
                    var data = response.data.data;
                    data = data.map(item => {
                        item.type = 'dept';
                        item.childrenIndex = 0;
                        return item
                    })
                    data = transformTozTreeFormat(data);
                    this.deptTree.push(...data);
                }
            });
        },
        treeClick(val) {//节点点击事件
            if(this.treeNode == val) return // 防止node-click和onde-expand事件重复
            this.treeNode = val;
            let params = {
                deptId    : val.id,
                status    :'ACTIVE',
            };
            if (val.type == "dept" && val.childrenIndex != 0) {
                return false;
            }
            if(val.type == "dept") {
                this.deptId = val.id;
                this.deptName= val.name;
                this.initgetStaffById(val.id);
            }
            if(val.children && val.children.length <= 0){ 
                this.isshowStaff = false;
                this.deptName  = val.name;
            }
        },
        //删除表格数据
        Removecolume(row){
            let index = this.EmptreeData.findIndex(v => v.id == row.id);
            if(index > -1) {
                this.EmptreeData.splice(index, 1);
            }
        },
    }
};
</script>
<style lang="scss" scoped>
.input_batch { 
    padding: 1px 3px;
    .el-input{ 
        display: inline-block;
        width: 100%;
        height: 30px;
    }
    /deep/ .el-input__inner{
        height: 28px;
        line-height: 28px;
    }
    .input-wrap{
        .g-cont{
            position: relative;
            width: 50%;
            height: 35px;
            float: left;
            i{
                position: absolute;
                top: 10px;
                right: 5px;
                cursor: pointer;
            }
        }
    }    
}
.busi-group{
    /deep/ .el-tree{
        height: 220px;
        overflow: auto;
    }
}
.staffSg-list{
    height: 220px;
    overflow: auto;
}
.staffSg-list-li{ 
    height: 28px;
    line-height: 28px;
    &:hover{ 
        background: #eeeeee;
    }
}
</style>

